<template>
  <div class="home-empty">
    <div v-if="title" class="empty-title">{{ title }}</div>
    <div class="empty-cls">
      <a-empty>
        <template #description>
          <span class="description">
            {{ getDescription() }}
          </span>
        </template>
      </a-empty>
    </div>
  </div>
</template>
<script setup lang="ts" name="Empty">
import { computed, ref } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  description: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
})
const type = computed(() => props.type)
const title = computed(() => props.title)
const getDescription = () => {
  const description = ref('')
  switch (type.value) {
    case 'default':
      description.value = props.description || '未查询到相关内容'
      break
    case 'query':
      description.value = props.description || '暂无相关内容'
      break
    default:
      description.value = props.description
      break
  }
  return description.value
}
</script>
<style lang="less" scoped>
.home-empty {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
  .description {
    color: var(--color-default);
  }
  .empty-title {
    padding-left: 20px;
    height: 54px;
    line-height: 54px;
    font-weight: 500;
    text-align: left;
  }
  .empty-cls {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
